<template>
  <van-popup
    v-model:show="props.eventShow"
    round
    position="bottom"
    :style="{ height: '24%' }"
    @click="closeEvent"
  >
    <div class="border">
      <div @click="queryEvent">
        <i class="iconfont icon-query" style="color: #6ca4ea"></i
        ><span>事件查询</span>
      </div>
      <div @click="addEvent">
        <i class="iconfont icon-plus" style="color: orange"></i
        ><span>事件添加</span>
      </div>
      <div @click="closeQueryEvent">
        <i class="iconfont icon-close" style="color: red"></i
        ><span>关闭查询</span>
      </div>
    </div>
  </van-popup>
  <!-- popup弹窗 -->
  <div id="popup" class="ol-popup" ref="container">
    <div id="popup-content" ref="content"></div>
  </div>
  <!-- 提交事件 -->
  <van-overlay :show="dialogShow" style="z-index: 99">
    <div class="formBox">
      <van-form @failed="onFailed" @submit="onSubmit">
        <van-cell-group inset>
          <!-- 事件类型 -->
          <van-field
            v-model="typeResult"
            is-link
            readonly
            name="type"
            label="事件类型"
            placeholder="点击选择事件类型"
            required
            :rules="[{ required: true, message: '请选择事件类型' }]"
            @click="showTypePicker = true"
          />
          <van-popup v-model:show="showTypePicker" position="bottom">
            <van-picker
              :columns="typecolumns"
              @confirm="ontypeConfirm"
              @cancel="showTypePicker = false"
            />
          </van-popup>
          <!-- 事故严重程度 -->
          <van-field
            v-model="serverResult"
            is-link
            readonly
            name="grade"
            label="严重程度"
            required
            placeholder="点击选择严重程度"
            :rules="[{ required: true, message: '请选择择严重程度' }]"
            @click="showServerPicker = true"
          />
          <van-popup v-model:show="showServerPicker" position="bottom">
            <van-picker
              :columns="servercolumns"
              @confirm="onserverConfirm"
              @cancel="showServerPicker = false"
            />
          </van-popup>
          <!-- 事发位置 -->
          <van-field
            v-model="eventPosition"
            name="address"
            label="事发位置"
            placeholder="请输入事发位置"
            required
            :rules="[{ required: true, message: '请填写事发位置' }]"
          />
          <!-- 经纬度 -->
          <van-field
            v-model="lnglat"
            readonly
            name="lnglat"
            label="经纬度"
            required
            :rules="[{ required: true, message: '请输入经纬度' }]"
          />
          <!-- 驾驶人姓名 -->
          <van-field
            v-model="diverName"
            name="drivername"
            label="驾驶人姓名"
            placeholder="请输入驾驶人姓名"
          />
          <!-- 车牌号 -->
          <van-field
            v-model="carNum"
            name="car_number"
            label="车牌号"
            placeholder="请输入车牌号"
          />
          <!-- 事故描述 -->
          <van-field
            v-model="message"
            rows="6"
            autosize
            label="事故描述"
            name="description"
            type="textarea"
            maxlength="100"
            placeholder="请输入事故描述"
            required
            show-word-limit
            :rules="[{ required: true, message: '请输入事件描述' }]"
          />
        </van-cell-group>
        <div style="margin: 10px" class="btn-group">
          <van-button round block @click="cancelAddEvent"> 取消 </van-button>
          <van-button round block type="primary" native-type="submit">
            提交
          </van-button>
        </div>
      </van-form>
    </div>
  </van-overlay>
</template>
<script setup>
//导入hook
import { useQueryEvent } from "./hooks/useQueryEvent"
import { useAddEvent } from "./hooks/useAddEvent"
const { queryEvent, container, content, closeQueryEvent } = useQueryEvent()
const {
  addEvent,
  dialogShow,
  typeResult,
  showTypePicker,
  typecolumns,
  ontypeConfirm,
  serverResult,
  showServerPicker,
  servercolumns,
  onserverConfirm,
  eventPosition,
  lnglat,
  diverName,
  carNum,
  message,
  onFailed,
  onSubmit,
  cancelAddEvent,
} = useAddEvent()

const props = defineProps(["eventShow"])
const emit = defineEmits(["close-event"])
function closeEvent() {
  emit("close-event")
}
</script>
<style lang="stylus" scoped>
@import "http://at.alicdn.com/t/c/font_3789415_3cphv28xpk5.css";
.border
    width 100%
    text-align center
    font-size 20px
    margin 25px auto
    color #333
    div
      padding 0 0 10px 0
      &:hover
        background-color #eee
    .iconfont
      font-size 20px
      padding-right 15px
.ol-popup {
  position: fixed;
  background-color: white;
  padding: 15px;
  border-radius: 10px;
  border: 1px solid #cccccc;
}
.ol-popup:after,
.ol-popup:before {
  top: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
.ol-popup:after {
  border-top-color: white;
  border-width: 10px;
  left: 48px;
  margin-left: -10px;
}

.ol-popup:before {
  border-top-color: #cccccc;
  border-width: 11px;
  left: 48px;
  margin-left: -11px;
}
#popup-content {
  font-size: 15px;
  font-family: "微软雅黑";
}
#popup-content .markerInfo {
  font-weight: bold;
}
.formBox
  margin 10px auto
.btn-group
  display flex
  justify-content space-evenly
  .van-button
    width 150px
</style>
